
//全局变量初始化
//找到要拖进去的目标元素
var objDiv = null;
var hasPic = "0";
var num = 0;
var odiv;
var aSpan;
var imgs = new Map();


$(function(){
    //缩放图片-----使图片在内部移动
    objDiv = $("#contentInput");

    objDiv[0].addEventListener('ondragover', function (e) {
        console.log('？’');
        e.preventDefault();
    });

    //文本框被点击时
    objDiv.click(function (e) {
        //如果点击的不是图片,将所有缩放框隐藏
        if ($(e.target)[0].tagName != "IMG") {
            for (var i = 0; i < num; i++) {
                $(".kx_border_img_stretch" + i).css({ "width": 0, "height": 0, "top": "100%", "left": "0px", "display": "none" });
            }
        }
    });

    //拖拽释放
    objDiv[0].addEventListener('ondrop', function (e) {
        e.preventDefault();
        //获取拖过来的文件
        var fs = e.dataTransfer.files;
        var len = fs.length; //获取文件个数

        for (var i = 0; i < len; i++) {
            var _type = fs[i].type;
            var idnum = num + i;
            if (_type.indexOf("image") != -1) 
            {//判断他是不是图片文件
                hasPic = 1;
                var fd = new FileReader();
                fd.readAsDataURL(fs[i]);
                fd.onload = function () 
                {
                    hasPic = "1";
                    var oImg = $("<img src='' width='180' height='180' onclick='imgOnClick(this," + idnum + ")'/>");
                    oImg.attr("src", this.result);
                    $("#contentInput").append(oImg);
                    var rightcontrol = $("<div class='kx_border_img_stretch" + idnum + "'" +
                        "style='border: 1px solid #0000CC;position: absolute;top: 0;display: none; '> " +
                        "<span class='br" + idnum + "'style=' width: 15px;height: 15px;position: absolute;background:#ccc;z-index: 2;cursor: nwse-resize;right: -5px; bottom: -5px; '></span></div> ");
                    $("#contentInput").append(rightcontrol);
                    onAddImg(idnum);
                }
            } 
            else 
            {
                // alert("请，上传图片文件！！");
            }
        } 
        num += len;
    });
});



//图片被拖拽进文本框后
function onAddImg(n) {
    odiv = document.getElementsByClassName('kx_border_img_stretch' + n)[0];
    console.log(odiv);
    aSpan = odiv.getElementsByTagName('span');
    for (var i = 0; i < aSpan.length; i++) {
        dragFn(aSpan[i], n, odiv);
    }
}
//图片被点击时
function imgOnClick(obj, n) {
    var X = $(obj).position().top;
    var Y = $(obj).position().left;
    console.log(X)
    var wid = $(obj)[0].width;
    var hei = $(obj)[0].height;
    //本图片被点击时,将其他图片的缩放框隐藏
    for (var i = 0; i < num; i++) {
        $(".kx_border_img_stretch" + i).css({ "width": 0, "height": 0, "top": "100%", "left": "0px", "display": "none" });
    }
    //显示本图片的缩放框
    $(".kx_border_img_stretch" + n).css({ "width": wid, "height": hei, "top": X + "px", "left": Y + "px", "display": "inline-block" });
    imgs.set(n, $(obj));
}

//缩放操作
function dragFn(obj, n, oDiv) {
    obj.onmousedown = function (ev) {
        var oEv = ev || event;
        var oldWidth = oDiv.offsetWidth;
        var oldHeight = oDiv.offsetHeight;
        var oldX = oEv.clientX;
        var oldY = oEv.clientY;
        var oldLeft = oDiv.offsetLeft;
        var oldTop = oDiv.offsetTop;
        document.onmousemove = function (ev) {
            var oEv = ev || event;
            if (obj.className == 'br' + n) {
                oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
                oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
            }
            var new_width = oDiv.style.width;
            var new_height = oDiv.style.height;
            imgs.get(n).css({ "width": new_width, "height": new_height })
        };
        document.onmouseup = function () {
            document.onmousemove = null;
        };
        return false;
    };
}  